<script setup>
import { ref } from 'vue'
import api from '@/utils/api'
import { Snackbar, Dialog } from '@varlet/ui'
</script>
<script>
export default {
  data() {
    return {
      genderCode: ref(null),
      userInfo: ref({
        nickname: '名字/昵称',
        otherDesc: '一句话/座右铭',
        description: '简介（这是示例，请选择上方选择器搜寻对象）',
        information: {
          phone: 1234567890,
          wx: 'xxx',
          qq: 123456,
          email: 'xxx@xxx.com'
        }
      }),
      loading: ref(false)
    }
  },
  methods: {
    // 搜索信息
    searchInfo() {
      // 先显示加载状态
      this.loading = true
      api
        .get('/query?genderCode=' + this.genderCode)
        .then((response) => {
          if (response.data.statusCode === 2000) {
            this.userInfo = response.data.data
            // 解析联系方式Json字符串
            try {
              this.userInfo.information = JSON.parse(this.userInfo.information)
            } catch (error) {
              console.log(error)
              // 用户信息不为空才提示
              if (this.userInfo !== null) {
                Snackbar({
                  type: 'info',
                  content: '联系方式可能存在问题',
                  duration: 1000
                })
              }
            }
          } else {
            // 置空用户信息
            this.userInfo = null
          }
          // 取消加载状态
          this.loading = false
        })
        .catch((error) => {
          console.log(error)
          Snackbar({
            type: 'error',
            content: '请求失败，请稍后再试',
            duration: 1000
          })
          // 取消加载状态
          this.loading = false
        })
    },
    // 复制并显示联系方式
    copyData(type, value) {
      // 显示弹窗展示联系方式
      Dialog({
        title: type,
        message: value.toString(),
        confirmButton: false,
        cancelButton: false
      })
    },
    // 跳转链接
    goTo(url) {
      window.location.href = url
    }
  }
}
</script>

<template>
  <div id="query">
    <var-loading description="搜索中..." :loading="loading">
      <var-space direction="column" size="large">
        <var-select
          placeholder="选择搜索的性别"
          v-model="genderCode"
          variant="outlined"
          @change="searchInfo"
        >
          <var-option label="男" :value="1" />
          <var-option label="女" :value="2" />
          <var-option label="未知" :value="0" />
        </var-select>

        <var-card
          v-if="userInfo"
          :title="userInfo.nickname"
          :subtitle="userInfo.otherDesc"
          :description="userInfo.description"
        >
          <template #extra>
            <var-space direction="row" size="large" justify="space-around">
              <var-button @click="copyData('手机号', userInfo.information.phone)" size="small">
                手机号
              </var-button>
              <var-button @click="copyData('微信号', userInfo.information.wx)" size="small">
                微信号
              </var-button>
              <var-button @click="copyData('QQ号', userInfo.information.qq)" size="small">
                QQ号
              </var-button>
              <var-button @click="copyData('邮箱', userInfo.information.email)" size="small">
                邮箱
              </var-button>
            </var-space>
          </template>
        </var-card>
        <var-result
          v-else
          type="empty"
          title="什么都没有"
          description="可以尝试去投放一下，等待搜寻哦~"
        >
          <template #footer>
            <var-button type="primary" @click="goTo('/insert')">去投放</var-button>
          </template>
        </var-result>
      </var-space>
    </var-loading>
  </div>
</template>

<style></style>
